<!--
 * @Author: blak-kong
 * @Date: 2019-12-05 15:11:11
 * @Email: 546598185@qq.com
 -->
<template>
    <div class="logFund">
         <el-dialog 
            :title="dialog.title" 
            :visible.sync="dialog.show"
            :close-on-click-modal='false'
            :close-on-press-escape='false'
            :modal-append-to-body="false">
            <div class="form">
                <el-form 
                    ref="form" 
                    :model="form"
                    :rules="form_rules"
                    label-width="120px" 
                    style="margin:10px;width:auto;">

                    <el-form-item prop='name'  label="导航名称:">
                        <el-input type="name" v-model="form.name"></el-input>
                    </el-form-item>

                    <el-form-item prop='url' label="链接地址:">
                        <el-input type="url" v-model="form.url"></el-input>
                    </el-form-item>

                    <el-form-item  class="text_right">
                        <el-button @click="dialog.show = false">取 消</el-button>
                        <el-button type="primary" @click='onSubmit("form")'>提  交</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
  name: "dialog-nav",
  props: {
    dialog: Object,
    form: Object
  },
  data() {
    return {
      form_rules: {
        name: [
          { required: true, message: "导航名不能为空！", trigger: "blur" }
        ],
        url: [
          { required: true, message: "链接不能为空！", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    onSubmit(form) {
      this.$refs[form].validate(valid => {
        if (valid) {
            const state = this.dialog.option == "add" ? "add" : "edit";
            this.$emit("update", this.form, this.dialog.index, this.dialog.levelIndex);
        }
      });
    }
  }
};
</script>

